<template>
  <div class="sick_people">
    <div class="chart-wrapper">
      <canvas id="mountNode" />
    </div>
  </div>
</template>

<script>
import F2 from '@antv/f2'
import DataSet from '@antv/data-set'
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.ant_clouds()
  },
  methods: {
    ant_clouds() {
      var Util = F2.Util

      // 获取 text 文本的图形属性
      function getTextAttrs(cfg) {
        return Util.mix({}, {
          fillOpacity: cfg.opacity,
          fontSize: cfg.origin._origin.size,
          rotate: cfg.origin._origin.rotate * Math.PI / 180,
          text: cfg.origin._origin.text,
          textAlign: 'center',
          fontFamily: cfg.origin._origin.font,
          fill: cfg.color,
          textBaseline: 'Alphabetic'
        }, cfg.style)
      }

      // 给point注册一个词云的shape
      F2.Shape.registerShape('point', 'cloud', {
        draw: function draw(cfg, container) {
          var attrs = getTextAttrs(cfg)
          var x = cfg.x
          var y = this._coord.y.start - cfg.y
          return container.addShape('text', {
            attrs: Util.mix(attrs, {
              x: x,
              y: y
            })
          })
        }
      })

      $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/f2/world-population.json', function(data) {
        var dv = new DataSet.View().source(data)
        var range = dv.range('value')
        var min = range[0]
        var max = range[1]
        var MAX_FONTSIZE = 56 // 最大的字体
        var MIN_FONTSIZE = 16 // 最小的字体
        var canvasWidth = $('#mountNode').width() // 获取画布宽度
        var canvasHeight = $('#mountNode').height() // 获取画布高度
        // 生成词云的布局
        dv.transform({
          type: 'tag-cloud',
          fields: ['x', 'value'],
          size: [canvasWidth, canvasHeight], // 同 canvas 画布保持一致
          font: 'Verdana',
          padding: 0,
          timeInterval: 9000, // max execute time
          rotate: function rotate() {
            var random = ~~(Math.random() * 4) % 4
            if (random === 2) {
              random = 0
            }
            return random * 270 // 0, 90, 270
          },
          fontSize: function fontSize(d) {
            if (d.value) {
              return (d.value - min) / (max - min) * (MAX_FONTSIZE - MIN_FONTSIZE) + MIN_FONTSIZE
            }
            return 0
          }
        })

        var chart = new F2.Chart({
          id: 'mountNode',
          padding: 0,
          pixelRatio: window.devicePixelRatio
        })
        chart.source(dv.rows, {
          x: {
            nice: false
          },
          y: {
            nice: false
          }
        })
        chart.legend(false)
        chart.axis(false)
        chart.tooltip(false)

        chart.point().position('x*y').color('category').shape('cloud')
        chart.render()
      })
    }
  }
}
</script>

// js代码
<style scoped>
 #mountNode {
   width: 1300px;
   height: 650px;
 }
</style>
